﻿@model Gueei.Gallery.Web.ViewModels.ImageViewModel
@using Gueei.Gallery.Web.Extensions
@{
    View.Title = "Image: " + Model.Name;
    Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
@section Script{
<script id="EditTemplate_TextArea" type="text/x-jquery-tmpl">
    <div class="ajaxEdit">
    <textarea class="ajaxEdit" rows="3" cols="25">${Value}</textarea>
    <p>
    <a class="ajaxEdit rotate button save" href="${Command}">Save</a>
    <a class="ajaxEdit rotate button cancel">Cancel</a>
    </p>
    </div>
</script>
<script type="text/javascript">
    $(function () {
        $("a.ajaxEdit").filter(".rotate").click(function (e) {
            e.preventDefault();
            var imgSrc = $(".imageContainer img").attr("src");
            $(".imageContainer img").attr("src", "/images/lightbox-ico-loading.gif");
            $.post($(this).attr("href"),
                    function (data) {
                        if (data.success) {
                            $(".imageContainer img").attr("src", imgSrc + "&refresh=" + Math.random());
                        }
                    });
        });

        $("#EditTemplate_TextArea").template("TextArea");

        $(".textEdit").each(function () {
            var item = { Value: $(this).html(), Command: $(this).data("command") };
            $.tmpl($(this).data("template"), item).appendTo($(this));
        });
    });
</script>
}
@section Sidebar{
<h2>
    Rotate</h2>
<a class="ajaxEdit rotate button" href="/Edit/@Model.Id/rotate/">Rotate 90 Degrees</a>
<a class="ajaxEdit rotate button" href="/Edit/@Model.Id/rotate/acw">Rotate 90 Degrees (ACW)</a>
<h2>
    Description</h2>
<p class="ajaxEdit textEdit" 
    data-template="TextArea" data-command="/Edit/@Model.Id/description">@Model.Description</p>
<h2>
    Tags</h2>
<ul class='imageTags'>
    @foreach (var t in Model.Tags)
    {
        <li>@Html.ActionLink(t, "Tag", "Browse", new { Name = t }, new { @class = "tag" })</li>
    }
</ul>
<h2>
    Details</h2>
<div class='imageData'>
    @Html.DisplayForModel()
</div>
}

<div class='largeImagePreview'>
    <div class='imageContainer'>
        @Html.Image(Model)
    </div>
    <ul class="downloadImage">
        <li>@Html.DownloadImageLink("Get Original Image", Model,
                         Gueei.Gallery.Core.Repositories.DefaultProfileName.Fullsize) </li>
    </ul>
</div>
